<template>
  <transition name="fade" enter-active-class="animated flipInX">
    <el-breadcrumb :key="crumbs.name" separator="/" style="height: 55px;line-height: 55px;">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item v-if="crumbs.path && crumbs.path != '/home'">{{crumbs.name | ellipsis}}</el-breadcrumb-item>
    </el-breadcrumb>
  </transition>
</template>
<script>
export default {
  data() {
    return {
      crumbs: {
        path: "",
        name: ""
      }
    };
  },
  watch: {
    $route() {
      this.getBreadcrumb();
    }
  },
  filters: {
    // 超长显示...
    ellipsis: function(val) {
      if (!val) return "";
      if (val.length > 10) {
        return val.slice(0, 10) + "...";
      }
      return val;
    }
  },
  components: {},
  methods: {
    open: function(path) {
      this.$router.push(path);
    },
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.name);
      const first = matched[1];
      this.crumbs.path = first.path;
      this.crumbs.name = first.name;
    }
  }
};
</script>
